import $ipc from "@renderer/services/ipc/ipc.service"
import useAppStore from "@renderer/store/useAppStore"
import useSettingStore from "@renderer/store/useSettingStore"
import { Input, Checkbox, Button } from "antd"

export default function AppSetting() {
  const showSetting = useAppStore(state => state.showSetting)
  const saveDir = useSettingStore(state => state.saveDir)
  const replaceOrigin = useSettingStore(state => state.replaceOrigin)
  const systemDownloadDir = useSettingStore(state => state.systemDownloadDir)

  function openFolderSelector() {
    $ipc.openDictSelector().subscribe(
      res => {
        if (res.canceled) return
        useSettingStore.setState({saveDir: res.filePaths[0] || ""})
      }
    )
  }
  return (
    <div className={`${showSetting ? "translate-y-0" : "translate-y-[100%]"} absolute left-0 right-0 bottom-0 bg-white transition-all p-3 text-sm`}>
      <div className="flex flex-row items-center">
        保存到：
        <Input onChange={event => useSettingStore.setState({saveDir: event.target.value})} className="flex-1 h-6 bg-slate-100 rounded-md text-[#333] px-2" value={saveDir || systemDownloadDir}/>
        <i onClick={openFolderSelector} className="iconfont icon-folder cursor-pointer ml-2"></i>
      </div>
      <div className="mt-2 flex flex-row items-center">
        替换原图：<Checkbox checked={replaceOrigin} onChange={event => useSettingStore.setState({replaceOrigin: event.target.checked})}></Checkbox>
        <div className="flex-1"></div>
        {/* <Button onClick={onSave} type="primary" size="small">收起</Button> */}
      </div>
      <div className="flex items-center justify-center">
        <i onClick={() => useAppStore.setState({showSetting: !showSetting})} className="iconfont icon-shouqi text-[24px] cursor-pointer"></i>
      </div>
    </div>
  )
}